import React, { CSSProperties } from "react";
import {
  AppstoreOutlined,
  MailOutlined,
  SettingOutlined,
} from "@ant-design/icons";
import type { MenuProps } from "antd";
import { Menu } from "antd";

type MenuItem = Required<MenuProps>["items"][number];

enum MenuItemKey {
  welcome = "welcome",
  userList = "userList"
}

export { MenuItemKey }


export function parseMenuItemKey(key: string): MenuItemKey {
  return Object.values(MenuItemKey).includes(key as MenuItemKey)
    ? key as MenuItemKey
    : MenuItemKey.userList;
}


function getItem(
  label: React.ReactNode,
  key: React.Key,
  icon?: React.ReactNode,
  children?: MenuItem[],
  type?: "group"
): MenuItem {
  return {
    key,
    icon,
    children,
    label,
    type,
  } as MenuItem;
}

const items: MenuProps["items"] = [
  getItem("欢迎", MenuItemKey.welcome, <MailOutlined />),
  getItem("系统管理", "sub1", <MailOutlined />, [
    getItem("用户列表", "g1"),
    getItem("角色列表", "g2"),
  ]),

  getItem("日志管理", "sub2", <AppstoreOutlined />, [
    getItem("登录日志", "5"),
    getItem("操作日志", "6"),
  ]),

  { type: "divider" },

  getItem("会员管理", "sub4", <SettingOutlined />, [
    getItem("会员列表", "9"),
    getItem("会员等级", "10"),
  ]),

  getItem("商品管理", "sub4", <SettingOutlined />, [
    getItem("商品分类", "9"),
    getItem("商品品牌", "10"),
  ]),
];

interface SiderMenuProps {
  onClick: (key: string) => void; // 定义回调函数的类型
}


const SiderMenu: React.FC<SiderMenuProps & CSSProperties> = ({ onClick }) => {
  const handleClick: MenuProps["onClick"] = (e) => {
    console.log("click ", e);
    onClick(e.key); // 将点击事件传递给父组件
  };

  return (
    <Menu
      onClick={handleClick}
      style={{ width: 256, maxHeight: "100%", overflowY: "scroll" }}
      defaultSelectedKeys={["1"]}
      defaultOpenKeys={["sub1"]}
      mode="inline"
      items={items}
    />
  );
};

export default SiderMenu;
